<template>
  <div style="padding: 20px 20%;background-color: #F8F8F8FF;min-height: 100vh">
    <div style="display: flex;gap: 20px;height: 400px;">
      <div style="width: 400px;">
        <image-preview :src="goods.img" :width="400" :height="400"/>
      </div>
      <div style="flex: 1;padding: 20px 0;display: flex;flex-direction: column;justify-content: space-between;">
        <div style="font: bolder 20px normal">{{ goods.name }}</div>
        <div style="display: flex;gap: 20px;font: lighter 14px normal;color:#666666FF">
          <div>浏览：{{ goods.readCount }}</div>
          <div>点赞：{{ goods.likeCount }}</div>
          <div>收藏：{{ goods.collectCount }}</div>
        </div>
        <div style="color: red;font-size: 30px;">￥{{ goods.price }}</div>
        <div>发货地：{{ goods.address }}</div>
        <div @click="$router.push('/chat?userId='+goods.userId)">
          <span style="margin-right: 20px">卖家：{{ goods.nickName }}</span>
          <span> <svg-icon icon-class="wechat"/> </span>
        </div>
        <div>发布日期：{{ goods.date }}</div>
        <div style="display: flex;gap: 10px;">
          <el-button @click="handleLike" type="warning">
            <span v-if="goods.liked">已点赞</span>
            <span v-else>点赞</span>
          </el-button>
          <el-button @click="handleCollect" type="primary">
            <span v-if="goods.collected">已收藏</span>
            <span v-else>收藏</span>
          </el-button>
          <el-button @click="handleOrder" type="danger">立即购买</el-button>
        </div>
      </div>
    </div>
    <!-- 添加或修改订单信息对话框 -->
    <el-dialog title="确认订单" :visible.sync="open" width="500px" append-to-body>
      <el-radio-group v-model="orders.addressId">
        <div v-for="item in addressList" :key="item.id" style="margin:10px">
          <el-radio :label="item.id">
            {{ item.name + '\t' + item.address }}
          </el-radio>
        </div>
      </el-radio-group>
      <div/>
      <el-link style="margin: 10px" href="/my/address" type="primary" :underline="false">
        还没有地址，去创建
      </el-link>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-tabs v-model="activeName" style="margin: 20px 0;min-height: 80vh" type="border-card">
      <el-tab-pane label="详情" name="second">
        <div style="text-align: center" v-html="goods.content"/>
      </el-tab-pane>
      <el-tab-pane label="评论" name="first">
        <Comment :fid="goods.id" module="goods"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {getGoods, updateGoods} from "@/api/project/goods";
import {addCollect} from "@/api/project/collect";
import {addLikes} from "@/api/project/likes";
import {listAddress} from "@/api/project/address";
import user from "@/store/modules/user";
import {addOrders} from "@/api/project/orders";
import Comment from "@/views/project/comment/Comment";

export default {
  name: "goods-detail",
  components: {Comment},
  created() {
    listAddress().then(res => this.addressList = res.rows)
    getGoods(this.$route.query.id).then(res => {
      this.goods = res.data
      this.form.fid = this.goods.id
      this.goods.readCount = this.goods.readCount + 1
      updateGoods(this.goods)
    })
  },
  computed: {
    userId() {
      return user.state.id
    }
  },
  data() {
    return {
      open: false,
      rules: {},
      goods: {},
      orders: {},
      form: {
        fid: null,
        module: 'goods'
      },
      activeName: 'second',
      addressList: [],
    }
  },
  methods: {
    handleLike() {
      addLikes(this.form).then(res => {
        if (!this.goods.liked) this.$message.success('点赞成功')
        else this.$message.success('取消成功')
        getGoods(this.$route.query.id).then(res => this.goods = res.data)
      })
    },
    handleCollect() {
      addCollect(this.form).then(res => {
        if (!this.goods.collected) this.$message.success('收藏成功')
        else this.$message.success('取消成功')
        getGoods(this.$route.query.id).then(res => this.goods = res.data)
      })
    },
    handleOrder() {
      this.open = true
    },
    submitForm() {
      let addressId = this.orders.addressId
      if (!addressId) {
        this.$message.error('请选择收货地址')
        return
      }
      this.orders = {...this.goods, addressId: addressId}
      addOrders(this.orders).then(res => {
        this.$message.success('下单成功')
        this.cancel()
      })
    },
    cancel() {
      this.open = false
      this.orders.addressId = null
    }
  }
}
</script>
